$(function(){
    $.post('/getPostsByPage',{pageIndex: 10,pageSize : 10},function(res){
        if(res.code == 200) {
            let html = template('tp',res.data);
            $('tbody').html(html);
        }
    });

    initPagination(10);
    // 用于生成分页结构
    function initPagination(currentIndex) {
        // 根据当前页，生成分也结构
        // 按钮个数
        let buttonCout = 5;
        // 根据当前页和总个数，生成开头和结尾
        let start = currentIndex-Math.floor((buttonCout-1)/2);
        let end = start + (buttonCout - 1 );
        // 从开头开始到结尾结束，生成多个按钮
        let html = `<li class="page-item"><a data-index="${currentIndex - 1}" class="page-link" href="javascript:void(0);">上一页</a></li>`;
        for (let i = start; i <= end; i++) {
            if(i === currentIndex) {
              html += `<li class="page-item active"><a data-index="${i}" class="page-link" href="javascript:void(0);">${i}</a></li>`;
            }else {
              html += `<li class="page-item"><a data-index="${i}" class="page-link" href="javascript:void(0);">${i}</a></li>`;
            }
          }
          html += `<li class="page-item"><a data-index="${currentIndex + 1}" class="page-link" href="javascript:void(0);">下一页</a></li>`

          $('.pagination').html(html);
    }

    $('.pagination').on('click','.page-link',function(){
        // 也要请求对应的页的数据
        // 取出要获取的是第几页
        let pageIndex = parseInt($(this).attr('data-index'));
        // 一页多少组数据
        let pageSize = 10;
        $.post('/getPostsByPage',{ pageIndex, pageSize },(res)=>{
            if(res.code == 200) {
                // 要替换掉表格中的内容
                let html = template('tp',res.data);
                $('tbody').html(html);
                // 要重新生成新的分页结构
                initPagination(pageIndex);

            }
        })
    })


})